<include file="Public/header" />
<script type="text/javascript" src="__ROOT__/Public/Plus/js/highcharts.js"></script> 
           
<div class="row">
    <!-- <div class="col-lg-6">
        <section class="panel">
            <header class="panel-heading">
                收入表
            </header>
            <div class="panel-body">
                <canvas id="myChart" width="400" height="400"></canvas>
            </div>
        </section>
    </div> -->
    <div class="col-lg-6">
        <section class="panel">
            <header class="panel-heading">
                收入表
            </header>
            <div class="panel-body">
              <div id="earnings" style="min-width:700px;height:400px"></div>

            </div>
           
        </section>
       

    </div>
    <div class="col-lg-6">
        <section class="panel">
            <header class="panel-heading">
                支出表
            </header>
            <div class="panel-body">
           		 <div id="expenditure" style="min-width:700px;height:400px"></div>
              

            </div>
           
        </section>
       

    </div>

    <div class="col-lg-6">
        <section class="panel">
            <header class="panel-heading">
                <p>
                班级排名：{$score.class_rank}<br/>
                学校排名:{$score.school_rank}
                </p>
            </header>
            <div class="panel-body">
           		 <div id="score" style="min-width:700px;height:400px"></div>
              

            </div>
           
        </section>
       

    </div>
</div>
<script type="text/javascript">
	//收入表 
    $('#earnings').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: '收入表'
        },
        tooltip: {
    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['养殖(种植)收入(年)：<?php echo $extra['culture_earnings']; ?>元',   <?php echo $extra['culture_earnings']; ?>],
                ['养老金补助(年)<?php echo $extra['pension_earnings']; ?>元',       <?php echo $extra['pension_earnings']; ?>],
                {
                    name: '打工收入(年):<?php echo $extra['work_earnings']; ?>元',
                    y: <?php echo $extra['work_earnings']; ?>,
                    sliced: true,
                    selected: true
                },
                // ['养老金补助(年)',    <?php echo $detail['pension_earnings']; ?>],
                ['低保补助(年)：<?php echo $extra['allowances_earnings']; ?>元',     <?php echo $extra['allowances_earnings']; ?>],
                ['其他收入(年)：<?php echo $extra['others_earnings']; ?>元',   <?php echo $extra['others_earnings']; ?>]
            ]
        }]
    });
//支出表
$('#expenditure').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: '支出表'
        },
        tooltip: {
    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                // ['养殖(种植)收入(年)：<?php echo $extra['culture_earnings']; ?>元',   <?php echo $extra['culture_earnings']; ?>],
                ['学生费用支出(年)：<?php echo $extra['other_expenditure_family']; ?>',       <?php echo $extra['other_expenditure_family']; ?>],
                {
                    name: '家庭生活支出(年)：<?php echo $extra['living_expenditure_family']; ?>元',
                    y: <?php echo $extra['living_expenditure_family']; ?>,
                    sliced: true,
                    selected: true
                },
                // ['养老金补助(年)',    <?php echo $extra['pension_earnings']; ?>],
                // ['低保补助(年)',     <?php echo $extra['allowances_earnings']; ?>],
                ['其他支出(年):<?php echo $extra['other_expenditure_family']; ?>元',   <?php echo $extra['other_expenditure_family']; ?>]
            ]
        }]
    });
		
	//成绩
	   $('#score').highcharts({
        chart: {
            type: 'column',
            margin: [ 50, 50, 100, 80]
        },
        title: {
            text: '成绩表'
        },
        xAxis: {
            categories: [
                '语文',
                '数学',
                '英文',
            
            ],
            labels: {
                rotation: -45,
                align: 'right',
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: '仅供参考'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>',
        },
        series: [{
            name: 'Population',
            data: [<?php echo $score['chinese_curricula'] ?>, <?php echo $score['math_curricula'] ?>, <?php echo $score['english_curricula'] ?>, ],
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                x: 4,
                y: 10,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif',
                    textShadow: '0 0 3px black'
                }
            }
        }]
    });


</script>



</body>